<template>
    <div id="app">
		<headerBack :title="title"></headerBack>
        <!--<div class="main"></div>-->
        <div class="login-input">
            <div class="input-control">
              <input type="text"  class="broker" v-model="broker" placeholder="请选择券商" readonly="readonly" @click="todealerSelect">
            </div>

            <div class="input-control">
                <input type="text" maxlength="11" class="phone" autofocus="autofocus" v-model="phone" placeholder="请输入手机号" >
                <span v-if="testPhone" class="error" @click="closePhone"></span>
            </div>

            <div class="input-control">
              <input type="text"  class="account" v-model="account" placeholder="请输入账号" >
              <span v-if="testAccount" class="error" @click="closereAccount"></span>
            </div>

            <div class="input-control">
              <input type="text"  class="userName" v-model="userName" placeholder="请输入昵称" >
              <span v-if="testUserName" class="error" @click="closeUserName"></span>
            </div>

            <div class="input-control">
                <input type="password" class="password" v-model="password" placeholder="请输入密码" >
                <span v-if="testPwd" class="error" @click="closePwd"></span>
            </div>
            <div class="input-control">
              <input type="password" class="password" v-model="repassword" placeholder="请输入确认密码" >
              <span v-if="testrePwd" class="error" @click="closerePwd"></span>
            </div>

            <div class="input-control">
              <input type="text"  class="address" v-model="address" placeholder="请输入地址" >
              <span v-if="testAddress" class="error" @click="closeAddress"></span>
            </div>
            <div class="input-control">
              <input type="text"  class="accountTdx" v-model="accountTdx" placeholder="请输入绑定的通达信账号" >
              <span v-if="testAccountTdx" class="error" @click="closeAccountTdx"></span>
            </div>

            <div class="input-control">
              <input type="password" class="password" v-model="passwordTdx" placeholder="请输入绑定的通达信密码" >
              <span v-if="testPasswordTdx" class="error" @click="closePasswordTdx"></span>
            </div>

            <div class="input-control">
              <input type="password" class="password" v-model="repasswordTdx" placeholder="请输入确认绑定的通达信密码" >
              <span v-if="testrePasswordTdx" class="error" @click="closerePasswordTdx"></span>
            </div>

            <div class="input-control">
                <span class="register" @click="register()">立即注册</span>
            </div>
            <div class="input-control">
                <p class="forget-pwd">
                    已有账号，
                    <router-link to="/login1" class="forget-pwd">
                        <span style="color:#f94b52;">去登录>></span>
                    </router-link>
                </p>
            </div>
        </div>
  </div>
</template>

<script>
import headerBack from './headerBack.vue'
import { Toast } from 'mint-ui';
import { MessageBox } from 'mint-ui';
import {mapGetters,mapActions} from 'vuex'
    export default {
        data() {
            return {
                title: '注册',
                phone: '',      //手机号
                password: '',    //密码
                repassword: '',    //密码
                email: '',       //邮箱
                account: '',
                accountTdx: '',
                address: '',
                broker: '',
                grond: '0',
                passwordTdx: '',
                repasswordTdx: '',
                userId: '0',
                userName: '',
            }
        },
        created () {
            var brokerJson = localStorage.getItem("broker"); //加载自选股数据
            brokerJson = JSON.parse(brokerJson);
            if (brokerJson != null) {
                this.broker = brokerJson.value;
            }
        },
        components: {
            headerBack,
        },
        watch: {

        },
        computed:{
            ...mapGetters(['status']),
            testPhone:function () {    //清除手机号
                if( this.phone.length > 0 ){
                    return true;
                }else {
                    return false;
                }
            },
            testPwd:function () {    //清除密码
                if( this.password.length > 0 ){
                    return true;
                }else {
                    return false;
                }
            },
            testrePwd:function () {    //清除密码
              if( this.repassword.length > 0 ){
                return true;
              }else {
                return false;
              }
            },
            testAccount:function () {
              if( this.account.length > 0 ){
                return true;
              }else {
                return false;
              }
            },
            testAddress:function () {
              if( this.address.length > 0 ){
                return true;
              }else {
                return false;
              }
            },
            testAccountTdx:function () {
              if( this.accountTdx.length > 0 ){
                return true;
              }else {
                return false;
              }
            },
            testPasswordTdx:function () {
              if( this.passwordTdx.length > 0 ){
                return true;
              }else {
                return false;
              }
            },
            testrePasswordTdx:function () {
              if( this.repasswordTdx.length > 0 ){
                return true;
              }else {
                return false;
              }
            },
            testUserName:function () {
              if( this.userName.length > 0 ){
                return true;
              }else {
                return false;
              }
            },
            testEmail:function () {    //清除邮箱
                if( this.email.length > 0 ){
                    return true;
                }else {
                    return false;
                }
            }
        },
        methods: {
            closePhone(){    //删除手机输入的信息
                this.phone = '';
            },
            closePwd(){      //删除输入的密码
                this.password = '';
            },
            closerePwd(){
              this.repassword = '';
            },
            closereAccount(){
              this.account = '';
            },
            closeAddress(){
              this.address = '';
            },
            closeAccountTdx(){
              this.accountTdx = '';
            },
            closePasswordTdx(){
              this.passwordTdx = '';
            },
            closerePasswordTdx(){
              this.repasswordTdx = '';
            },
            closeUserName(){
              this.userName = '';
            },
            closeEmail() {   //删除输入的邮箱
                this.email = '';
            },
            todealerSelect(){
                this.$router.push({
                  path: '/dealerSelect',
                  query:{tag:"register"}
                })
            },
            register() {
                console.log(this.phone)
                if(this.phone.trim()  == '' || this.password.trim()  ==''|| this.repassword.trim()  ==''|| this.account.trim()  ==''|| this.address.trim()  ==''|| this.accountTdx.trim()  ==''|| this.passwordTdx.trim()  ==''|| this.repasswordTdx.trim()  ==''|| this.broker.trim()  =='') {
                    MessageBox({
                        title: '提示',
                        message: '输入项不能为空',
                        showCancelButton: false
                    });
                    return ;
                }
                if(!(/^1[34578]\d{9}$/.test(this.phone))){
                    MessageBox({
                        title: '提示',
                        message: '请输入正确的手机号',
                        showCancelButton: false
                    });
                    this.phone = ''
                }else if (this.password.length<6) {
                    MessageBox({
                        title: '提示',
                        message: '密码长度不少于6位',
                        showCancelButton: false
                    });
                    this.password = ''
                }else if (this.password != this.repassword) {
                  MessageBox({
                    title: '提示',
                    message: '确认密码不一致',
                    showCancelButton: false
                  });
                  this.password = ''
                  this.repassword = ''
                }else if (this.passwordTdx != this.repasswordTdx) {
                  MessageBox({
                    title: '提示',
                    message: '确认通达信密码不一致',
                    showCancelButton: false
                  });
                  this.passwordTdx = ''
                  this.repasswordTdx = ''
                }else{
                    var user = {
                        phone: this.phone,
                        password: this.password,
                        account: this.account,
                        accountTdx: this.accountTdx,
                        address: this.address,
                        broker: this.broker,
                        grond: this.grond,
                        passwordTdx: this.passwordTdx,
                        userId: this.userId,
                        userName: this.userName,
                    }
                    user = JSON.stringify(user)
                    var params = {
                        user : user
                    }
                    var checkParams = {
                      phone: this.phone
                    }
                    var checkAccountParams = {
                      account : this.account
                    }
                    this.checkPhone(checkParams)
                      .then(data=>{
                        console.log(data)

                    }).then(()=>{
                      return this.checkAccount(checkAccountParams)
                    }).then(()=>{
                      this.findUser(params).then(data=>{
                          console.log(data)
                          if(data.body.code == '0') {
                            let instance = Toast('注册成功');
                            setTimeout(() => {
                              instance.close();
                            this.$router.push({path: '/login' })
                          }, 2000);
                          }
                      })
                    }).catch(err=>{
                        MessageBox.confirm(err.msg).then(action => {
                            this.$router.push({path: '/login' })
                        }).catch(e=>{
                            console.log(e)
                        })
                    })
                }
            },
            ...mapActions(['checkPhone','checkAccount','findUser'])
        },
    }
</script>

<style scoped>
#app{
    overflow: hidden;
}
.main {
    width: 100%;
    height: 12.5rem;
    margin-top: 2.5rem;
    background-color: #f8f8f8;
    background-image: url('../../static/imgs/banner.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
.login-input{
    width: 90%;
    margin:4.5rem auto;
}
.input-control{
    position: relative;
    font-size: 0px;
    margin-top: 1.25rem;
}
input[type='text'],input[type='password'],input[type='tel']{
    width: 100%;
    height: 2.2rem;
    font-size: 0.8125rem;
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    display: inline-block;
    line-height: normal;
    outline: 0;
    padding: 0 1rem;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.phone {
    background-image: url("../../static/imgs/手机号-1.png");
    background-repeat: no-repeat;
    background-position-x: 0.6rem;
    background-position-y: center;
    background-size: 1.5rem;
    padding-left: 2.4rem !important;
  }
.password{
    background-image: url("../../static/imgs/密码.png");
    background-repeat: no-repeat;
    background-position-x: 0.6rem;
    background-position-y: center;
    background-size: 1.5rem;
    padding-left: 2.4rem !important;
}
.email {
    background-image: url("../../static/imgs/email.png");
    background-repeat: no-repeat;
    background-position-x: 0.6rem;
    background-position-y: center;
    background-size: 1.4rem;
    padding-left: 2.4rem !important;
}
.forget-pwd{
    font-size: 0.75rem;
    color: #8a8a8a;
  }
.error{
    background-image: url("../../static/imgs/删除.png");
    background-repeat: no-repeat;
    background-position-x: 0.625rem;
    background-position-y:center;
    background-size: 1.25rem;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    top: 0;
    right: 0;
}
.register {
    display: block;
    width: 100%;
    background-color: #f94b52;
    color: #fff;
    font-size: 1rem;
    height: 2.4rem;
    border-radius: 20px;
    line-height: 2.4rem;
    margin-top: 1.25rem;
    text-align: center;
}
.login-register{
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: .875rem;
    color: #f94b52;
}
.register-link{
    color: #f94b52;
    text-decoration-line: none;
    font-size: .875rem;
}
</style>
